<template>
    <div>
        <div class="bread" v-if="computedDeatil">
            <span style="font-weight:bold;color:black">导航栏：</span><span v-for="(item,index) in breadcrumbList" @click="clickBread(item,index)" :key="item.id">{{item.name}} <span style="color:gray" v-if="index != breadcrumbList.length - 1">{{'> '}}</span> </span>
        </div>
        <el-row class="maina-tab-title">
            <el-col :span="24">
                <div class="flot-left">
                    <el-button type="primary" plain class="button-put"  @click="addmessageSourceConfig()">{{'新增'}}</el-button>
                    <!-- <el-button type="error" plain class="button-put" @click="deletemessageSourceConfig()">{{'删除'}}</el-button> -->
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table 
                v-loading="loading"
                :data="mainTaskList" 
                border 
                :fit="true"
                :empty-text="M2('暂无数据')"
                style="width: 100%"
                class="table-c"
                @selection-change="handleSelectionChange" :height='changeMaxHeight()'
                :header-cell-style="{background:'#f5f7fa',color:'#606266',padding:'5px 0px'}"
             >
                <!-- <el-table-column type="selection" width="40" header-align='center'></el-table-column> -->
                <el-table-column  align="center" width="200">
                    <template slot="header">
                        {{M2('选项ID')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.id}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="">
                    <template slot="header">
                        {{M2('选项名称')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.name}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="">
                    <template slot="header">
                        {{M2('备注')}}
                    </template>
                     <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="600"
                            popper-class="popper-h-class"
                            trigger="hover">
                            <div>
                                {{scope.row.note}}
                            </div>
                            <div class="col-title-threeLine" slot="reference">
                                {{scope.row.note}}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="200" v-if="computedDeatil">
                    <template slot="header">
                        {{M2('排序')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.sortIndex}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="操作 / 记录"  width="240" align="center" fixed="right">
                    <template slot="header">
                        {{M2('操作 / 记录')}}
                    </template>
                    <template slot-scope="scope">
                        <el-button style="margin-left:0" type="text" @click="addmessageSourceConfig(scope.row)">编辑 |</el-button>
                        <el-button style="margin-left:0" type="text" v-if="!computedDeatil" @click="routeJumpSubkey(scope.row)">子项管理 |</el-button>
                        <el-button style="margin-left:0" type="text" @click="deletemessageSourceConfig(scope.row)">删除 </el-button>
                        <el-button style="margin-left:0" type="text" @click="openRecordDialog(scope.row)">| 操作日志</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="page-box"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[50, 100, 200, 500]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!--改动记录-->
         <addConfigItemDialog ref="addConfigItemDialog" @mainListList='mainListList'></addConfigItemDialog>
        <el-dialog
            :title="M2('修改日志')"
            :visible.sync="dialogVisible"
            width="1000px"
            :modal="false"
            top="100px"
            class="dialog-main"
            z-index="9999"
            @close="closeUploadDialog()"
            v-dialogDrag
            >
            <remarksNew :remarksParam='remarksParam' ref="remarksNew" v-if="showTenth"></remarksNew>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUploadDialog()" size="mini">{{M2('关 闭')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import debounce from 'lodash.debounce';
import  addConfigItemDialog  from  '@/components/configurationItem/addConfigItemDialog'
import { getConfigSelectListByPage,delSelectList } from '@/api/user.js'
import { GetFileServiceUrl,formatDate} from '@/utils/tools'
import remarksNew from '@/components/remarksNew.vue'
export default {
    components:{
        addConfigItemDialog,
        remarksNew
    },
    data(){
        return {
            breadcrumbList:[
                {
                    name:'首页',
                    id:'-1'
                }
            ],
            uploadFilterList:{
                timeEnum: 500 ,//时间类型   全部(500)、今天(501)、三天内(502)、7天内(503)
                search: null, //搜索(供应商、开发ID、sku别名、sku、申请单号)
            },
            dialogVisible:false,
            showTenth:false,
            remarksParam:{},
            total:0,
            currentPage4:0,
            pageSize:50,
            pageNum:1,
            loading:false,
            mainTaskList:[],
            multipleSelection: [],
        }
    },
    props:{
        filterList:{
            default:() => ({})
        }
    },
    created: function() {
        this.mainListList()
    },
    watch:{
        filterList:{
            handler:function(val){
                this.pageNum = 1
                this.mainListList(val)
                this.uploadFilterList = val
            },
            deep:true
        },
    },
    computed:{
        scrollContainer(){
            return document.querySelector('.el-table__body-wrapper')
        },
        computedDeatil(){
            if(this.$route.query.id  != '-1' && this.$route.name != 'configurationItem'){
                return true
            }else {
                return false
            }
        }
    },
    methods:{
        mainListList:debounce (function(val){
            if(!val) val = this.uploadFilterList
            this.loading = true
            let pid = this.$route.query.id ? this.$route.query.id : '-1'
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                search:val && val.search ? val.search : null,//搜索(供应商、开发ID、sku别名、sku、申请单号)
                pid,
            }
            getConfigSelectListByPage(param).then(res => {
                this.mainTaskList = res.data.childSelectList.rows
                this.total = res.data.childSelectList.records;
                this.currentPage4 = res.data && res.data.childSelectList.pageNum ? res.data.childSelectList.pageNum : 1
                this.loading = false
                if(res.data.id){
                    if(this.breadcrumbList.some(item => item.id == res.data.id)) return
                    this.breadcrumbList.push({id:res.data.id,name:res.data.name})
                }else {
                    this.breadcrumbList =[
                        {
                            name:'首页',
                            id:'-1'
                        }
                    ]
                }
            }).catch(res => {
                this.loading = false
            })       
        },500),
        clickBread(list,index){
            this.$router.push({
                name: "configurationDetail",
                query:{
                    id:list.id
                }
            })
            this.breadcrumbList.splice(index+1)
            this.mainListList()
        },
        routeJumpSubkey(row){
            if(this.computedDeatil){
                this.$router.push({
                    name: "configurationDetail",
                    query:{
                        id:row.id
                    }
                })
            }else {
                let routeData = this.$router.resolve({
                    name: "configurationDetail",
                    query:{
                        id:row.id
                    }
                });
                window.open(routeData.href, '_blank');
            }
            this.mainListList()
            if(this.breadcrumbList.some(item => item.id == row.id)) return
            
        },
        //日志弹窗
        openRecordDialog(val){
            this.remarksParam = {
                productCountryId:`${val.pid}_${val.id}`,
                noteBussinessName:'SelectList_note',
                pageNum:0,
                PageIndex:-1,
                proImageList:GetFileServiceUrl(),
                mainBtn:false,
                Mark:null,
                showAllbutton:false,
                BusinessName:`${val.pid}_${val.id}`,
            }
            this.showTenth = true
            this.dialogVisible = true
        },
        closeUploadDialog(){
            this.showTenth = false
            this.dialogVisible = false
        },
        addmessageSourceConfig(row){
            this.$refs.addConfigItemDialog.openCommonDialog(row)
            if(!row){
                 this.$refs.addConfigItemDialog.title = `新建配置选项`
            }else {
                 this.$refs.addConfigItemDialog.title = `编辑配置选项 - ${row.name}`
            } 
        },
        deletemessageSourceConfig(row){
            this.$confirm((`是否确认删除该条数据？`), { 
                confirmButtonText: this.M2('确定'),
                cancelButtonText: this.M2('取消'),
                type: 'warning'
                }).then(() => {
                    let param = {
                        id:row.id,
                        pid:row.pid,
                    }
                delSelectList(param).then((res) => {
                if(res.code == 200){
                    this.success('删除成功！')
                }
                this.mainListList()
            }).catch(() => {
                return
            });
        }).catch(() => {
            return
        })
        },
        changeMaxHeight(){
            let nHeight = 0
            if(document.querySelector('.navbarContainer')){
                if(navigator.userAgent.indexOf('WebKit') > -1) {
                    nHeight = 90
                }else {
                    nHeight = 90
                }
                return window.innerHeight - document.querySelector('.navbarContainer').offsetHeight + 10  - nHeight  + 'px'
            }
                return window.innerHeight - 255 + 'px' 
        },
        //时间格式修改
        formatDate(row) {
            if(row){
                return formatDate(row);
            }else {
                return ''
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.mainListList(this.uploadFilterList)
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.mainListList(this.uploadFilterList)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        success(msg) {
            this.$message({
                showClose: true,
                message:this.M2(msg),
                offset:220,
                duration: 2000,
                type: 'success'
            });
        },
        warning(msg) {
            this.$message({
                showClose: true,
                message: this.M2(msg),
                offset:220,
                type: 'warning'
            });
        },
        error(msg) {
            this.$message({
                showClose: true,
                message: msg,
                offset:220,
                type: 'error'
            });
        },
    }
}
</script>
<style scoped lang="scss">
.dropdown-class.el-dropdown-menu {
    width: 100px;
}
::v-deep.dialog-main {
    .el-dialog__header {
        padding: 10px 20px 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .el-dialog__body {
        padding: 10px 20px;
    }
}
.page-box{
    position: fixed;
    bottom: 10px;
    right: 30px;
}
.button-put{
    padding: 5px 10px;
    font-size: 12px;
}
.maina-tab-title{
    top: -2px;
    .flot-left{
        float: left;
    }
    .order-position{
        margin-left: 10px;
    }
}
.col-title-threeLine{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    text-align: left;
}
.popper-h-class {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: clip;
}
::v-deep.table-c{
    td {
        padding: 0px 0;
    }
}

.bread {
    position: fixed;
    top: 10px;
    left: 6px;
    z-index: 1111111;
    // border-bottom: 2px solid #e6ebf5;
    width: 50%;
    line-height: 23px;
    height: 23px;
    padding-left: 10px;
    font-size: 12px;
    color: #3366cc;
    cursor: pointer;
    span {
            &:hover{
            color: #3366cc;
        }
    }
}
</style>